var UI = {
	screen 	: {
		bar	: 0,
		w : 0,
		h : 0,
		pos : {
			x : 0,
			y : 0
		}
	},
	board	: null,
	clicking	: false,
	tiles	: {
		num : {
			x : 0,
			y : 0
		},
		w : 0,
		h : 0,
		MAX : 6
	},
	
	wheel		: null,
	
	signs		: null,

	lastScore	: 0,

	BLOCK		: false,
	REC		: false,

	actions	: null,
	
	start		: function(nx, ny){
		Draw.start(nx, ny);

		UI.wheel = new Array(7);
		UI.wheel[0] = new Array(" ", " ", " ");
		UI.wheel[1] = new Array("FF0000", "FF4040", "FF7373");
		UI.wheel[2] = new Array("7109AA", "9F3ED5", "AD66D5");
		UI.wheel[3] = new Array("1240AB", "4671D5", "6C8CD5");
		UI.wheel[4] = new Array("00CC00", "39E639", "67E667");
		UI.wheel[5] = new Array("FFFF00", "FFFF40", "FFFF73");
		UI.wheel[6] = new Array("FFAA00", "FFBF40", "FFD073");

		var h = Draw.ctx.height;
		var w = Draw.ctx.width;
		
		UI.actions = new Array();
		UI.lineWidth = 1;
		
		UI.signs = new Array();
		UI.signs[0] = " ";
		UI.signs[1] = "A";
		UI.signs[2] = "C";
		UI.signs[3] = "G";
		UI.signs[4] = "T";
		UI.signs[5] = "U";
		UI.signs[6] = "X";

		UI.screen.bar	= h*0.05;
		UI.screen.w	= w;
		UI.screen.h	= h - UI.screen.bar;
		UI.tiles.num.x = nx;
		UI.tiles.num.y = ny;
		UI.lastScore = 0;

		UI.screen.pos.x = canvas.offsetLeft;
		UI.screen.pos.y = canvas.offsetTop;

		UI.tiles.w = UI.screen.w/UI.tiles.num.x;
		UI.tiles.h = UI.screen.h/UI.tiles.num.y;
		
		window.setInterval("UI.recursiveUpdate()", 100);
	},

	whichTile	: function(pos){
		var tileX = Math.floor(pos.x / UI.tiles.w);
		var tileY = Math.floor(pos.y / UI.tiles.h);
		if(tileX < 0){
			tileX = 0;
		}else if(tileX >= UI.tiles.num.x){
			tileX = UI.tiles.num.x-1;
		}
		
		if(tileY < 0){
			tileY = 0;
		}else if(tileY >= UI.tiles.num.y){
			tileY = UI.tiles.num.y-1;
		}
		
		return Tools.newCoord(tileX, tileY);
	},

	onMouseDown		: function(e){
		if(!UI.BLOCK){
			UI.clicking	= true;
			var pos = UI.getCursorPosition(e);
			var tile = UI.whichTile(pos);
			Logic.onMouseDown(tile);
		}
	},

	onMouseMove		: function(e){
		if(UI.clicking){
			var pos	= UI.getCursorPosition(e);
			var tile = UI.whichTile(pos);
		}
		Logic.onMouseMove(tile);
	},
	
	onMouseUp		: function(e){
		UI.clicking	= false;
		var pos = UI.getCursorPosition(e);
		var tile = UI.whichTile(pos);
		Logic.onMouseUp();
	},

	getCursorPosition	: function(e) {
		var x;
		var y;
		if (e.pageX != undefined && e.pageY != undefined) {
			x = e.pageX;
			y = e.pageY;
		}else{
			var body = document.body;
			var element = document.documentElement;
			x = e.clientX + body.scrollLeft + element.scrollLeft;
			y = e.clientY + body.scrollTop + element.scrollTop;
		}
		x -= UI.screen.pos.x;
		y -= UI.screen.pos.y;
	
		return Tools.newCoord(x, y);
	},

	doStuff	: function(stuff){
		while(stuff.length > 0){
			UI.actions.push(stuff.shift());
		}
	},

	recursiveUpdate		: function(){
		if(!UI.REC){
			UI.BLOCK = true;
			UI.recursiveActions();
		}
	},

	recursiveActions	: function(){
		if(UI.actions.length > 0){
			var action = UI.actions.shift();
			switch(action.action){
				case Tools.BOARD :
					console.log("BOARD");
					UI.updateBoard(action.stuff);
					break;
				case Tools.SELECTION :
					//console.log("Selection: [%s, %s]", action.stuff.x, action.stuff.y);
					UI.updateSelection(action.stuff);
					break;
				case Tools.DESELECTION :
					//console.log("Deselection: [%s, %s]", action.stuff.x, action.stuff.y);
					UI.updateTile(action.stuff);
					break;
				case Tools.SCORE :
					//console.log("Score: %s", action.stuff);
					UI.updateScore(action.stuff);
					break;
				case Tools.FALLING :
					console.log("Fall: %s", action.stuff.length);
					UI.fallingDist = 0;
					UI.updateFallingREC(action.stuff);
					break;
				case Tools.REMOVE :
					console.log("Remove: %s", action.stuff.length);
					UI.removeTilesREC(action.stuff);
					break;
				case Tools.SWITCH :
					console.log("Switch: [%s, %s] - [%s, %s]", action.stuff[0].x, action.stuff[0].y, action.stuff[1].x, action.stuff[1].y);
					UI.switchTiles(action.stuff);
					break;
			}
		}else{
			UI.BLOCK = false;
		}
	},

	update		: function(board, selection, score){
		for(var x = 0; x < board.length; x++){
			var gapX = x * UI.tiles.w;
			for(var y = 0; y < board[x].length; y++){
				var gapY = y * UI.tiles.h;
				var value = board[x][y];
				
				if(selection != null && x == selection.x && y == selection.y){
					UI.drawTileHigh(gapX, gapY, value);
				}else{
					UI.drawTile(gapX, gapY, value);
				}
			}
		}

		UI.updateScore(score);
	},
	
	updateBoard	: function(board){
		UI.board = board;
		UI.clearScreen();
		for(var x = 0; x < board.length; x++){
			var gapX = x * UI.tiles.w;
			for(var y = 0; y < board[x].length; y++){
				var gapY = y * UI.tiles.h;
				var value = board[x][y];
				if(value > 0){
					UI.drawTile(gapX, gapY, value);
				}
			}
		}
	},
	
	updateSome	: function(some){
		UI.REC = true;
		UI.clearScreen();
		for(s in some){
			var gapX = some[s].x * UI.tiles.w;
			var gapY = some[s].y * UI.tiles.h;
			UI.drawTile(gapX, gapY, some[s].value);
		}
		UI.REC = false;
	},
	
	updateSelection	: function(tile){
		UI.drawTileHigh(tile.x * UI.tiles.w, tile.y * UI.tiles.h, tile.value);
	},

	updateTile	: function(tile){
		UI.drawTile(tile.x * UI.tiles.w, tile.y * UI.tiles.h, tile.value);
	},
	
	updateScore	: function(score){
		UI.drawBar();
		if(score != null){
			UI.lastScore = score;
		}
		Draw.textStyle("bold "+UI.screen.bar+"px sans-serif");
		Draw.textCenter(0, UI.screen.h, UI.screen.w, UI.screen.bar, UI.lastScore, Draw.rgbColor(90, 90, 90));
	},
	
	drawBar		: function(){
		Draw.rect(0, UI.screen.h, UI.screen.w, UI.screen.bar, Draw.rgbColor(20,20,20), Draw.rgbColor(10,10,15));
	},
	
	removeTilesREC	: function(tiles){
		UI.REC = true;
		
		UI.clearScreen();
		var removing = false;
		for(t in tiles){
			var tile = tiles[t];
			switch(tile.f){
			case 0: UI.drawTile(tile.x * UI.tiles.w, tile.y * UI.tiles.h, tile.value);
				break;
			case 1: if(!removing){
					UI.drawTileRemove(tile.x * UI.tiles.w, tile.y * UI.tiles.h, tile.value);
					tiles[t].f = 2;
					removing = true;
				}else{
					UI.drawTile(tile.x * UI.tiles.w, tile.y * UI.tiles.h, tile.value);
				}
				break;
			}
		}
		UI.updateScore()
		
		if(removing){
			window.setTimeout(UI.removeTilesREC, 100, tiles);
		}else{
			UI.REC = false;
		}
	},

	updateFallingREC	: function(falling){
		UI.REC = true;
		var d = UI.tiles.h/10

		var lastDist = UI.fallingDist;
		UI.fallingDist += d;

		UI.clearScreen();

		var fallen = false;
		var newFalling = new Array();
		for(f in falling){
			var x = falling[f].x * UI.tiles.w;
			var y = falling[f].y * UI.tiles.h;
			var v = falling[f].value;
			var f = falling[f].f;
			
			if(f == 0){
				UI.drawTile(x, y, v);
			}else{
				var tileDist = f * UI.tiles.h;
				if(UI.fallingDist <= tileDist){
					UI.drawTileFall(x, y+UI.fallingDist, v);
					fallen = true;
				}else{
					UI.drawTile(x, y+tileDist, v);
				}
			}
		}
		UI.updateScore();
		if(fallen){
			window.setTimeout(UI.updateFallingREC, 5, falling);
		}else{
			UI.REC = false;
		}
	},
	
	switchTiles	: function(tiles){
		if(tiles != null){
			UI.REC = true;
			//window.setTimeout(UI.switchTilesREC, 150, tiles);
			UI.switchTilesREC(tiles);
		}
	},
	
	switchTilesREC	: function(tiles){
		if(tiles != null){
			var tileA = tiles[0];
			var tileB = tiles[1];
			UI.drawTile(tileA.x * UI.tiles.w, tileA.y * UI.tiles.h, tileB.value);
			UI.drawTileHigh(tileB.x * UI.tiles.w, tileB.y * UI.tiles.h, tileA.value);
			UI.REC = false;
		}		
	},
	
	drawTile	: function(x, y, value){
		if(value > 0){
			var stroke = 3;
			var r = UI.tiles.w/2;
			var xx = x+r;
			var yy = y+r;
			var r = UI.tiles.h/2;
			Draw.circle(xx, yy, r, UI.wheel[value][1], stroke, UI.wheel[value][0]);
			Draw.textStyle("bold "+ r +"px sans-serif");
			Draw.textCenter(x, y, UI.tiles.w, UI.tiles.h, UI.signs[value], UI.wheel[value][1]);
		}
	},
	
	drawTileHigh	: function(x, y, value){
		if(value > 0){
			var stroke = 3;
			var r = UI.tiles.w/2;
			var xx = x + r;
			var yy = y + r;
			var r = UI.tiles.h/2;
			Draw.circle(xx, yy, r, UI.wheel[value][0], stroke, UI.wheel[value][0]);
			Draw.textStyle("bold "+ r +"px sans-serif");
			Draw.textCenter(x, y, UI.tiles.w, UI.tiles.h, UI.signs[value], UI.wheel[value][1]);
		}
	},

	drawTileFall	: function(x, y, value){
		UI.drawTile(x, y, value);
	},
	
	drawTileRemove	: function(x, y, value){
		if(value > 0){
			var stroke = 3;
			var r = UI.tiles.w/2;
			var xx = x + r;
			var yy = y + r;
			var r = UI.tiles.h/4;
			Draw.circle(xx, yy, r, UI.wheel[value][0], stroke, UI.wheel[value][0]);
			Draw.textStyle("bold "+ r +"px sans-serif");
			Draw.textCenter(x, y, UI.tiles.w, UI.tiles.h, UI.signs[value], UI.wheel[value][1]);
		}
	},
	
	clearScreen	: function(){
		var w = UI.screen.w;
		var h = UI.screen.h;
		var colorA = Draw.rgbColor(100,90,90);
		var colorB = Draw.rgbColor(90,100,90);
		//Draw.gradient(0, 0, w, h, colorA, colorB);
		var color = Draw.rgbColor(75,75,75);
		Draw.lineWidth(0);
		Draw.rect(0, 0, w, h, color);
	}
}
